<%--
  Created by IntelliJ IDEA.
  User: 17400
  Date: 2023/6/12
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f3f3;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        form {
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #ffffff;
        }
        thead {
            background-color: #007BFF;
            color: white;
        }
        th, td {
            text-align: left;
            padding: 15px;
            border: 1px solid #ddd;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination a {
            margin: 0 5px;
            text-decoration: none;
            color: #007BFF;
        }
        .pagination span {
            margin: 0 5px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;  /* 使用百分比让宽度更自适应 */
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);  /* 添加阴影 */
            border-radius: 10px;  /* 添加圆角 */
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* 改进表单样式 */
        .modal form {
            display: flex;
            flex-direction: column;
        }

        .modal form label {
            margin-bottom: 5px;
        }

        .modal form input[type="text"], form input[type="number"] {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .modal form input[type="submit"] {
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
        }

        .modal form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* 排序链接样式 */
        .sort-arrows {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }

        .sort-arrows a {
            color: white;
            text-decoration: none;
            font-size: 0.7em;
            margin: 2px 0;  /* 上下边距为2px，左右边距为0 */
        }

        /* 为排序链接添加鼠标悬停效果 */
        .sort-arrows a:hover {
            color: #0056b3;
        }
        .sort-th{
            display: flex;
        }
        .sort-th-title{
            line-height: 2em;
        }

        .bg-red{
            color: red !important;
        }
    </style>
</head>
<body>
<div class="container">
<%@ include file="header.jsp"%>

<form action="" method="get">
    <label for="title">关键字:</label>
    <input type="text"  name="title" value="${event.title}">
    <input type="submit" value="搜索">
</form>
<table>
    <thead>
    <tr>
        <th>关键字</th>
        <th class="sort-th">
            <div class="sort-th-title">搜索指数</div>
            <div class="sort-arrows">
                <c:choose>
                    <c:when test="${sort=='search_index' &&  order=='asc'}">
                        <a href="?sort=search_index&order=asc&title=${event.title}" class="bg-red" title="升序排序">▲</a>
                    </c:when>
                    <c:otherwise>
                        <a href="?sort=search_index&order=asc&title=${event.title}" title="升序排序">▲</a>
                    </c:otherwise>
                </c:choose>
                <c:choose>
                    <c:when test="${sort=='search_index' &&  order=='desc'}">
                        <a href="?sort=search_index&order=desc&title=${event.title}" class="bg-red" title="降序排序">▼</a>
                    </c:when>
                    <c:otherwise>
                        <a href="?sort=search_index&order=desc&title=${event.title}" title="降序排序">▼</a>
                    </c:otherwise>
                </c:choose>
            </div>
        </th>

        <th>作者</th>
        <th class="sort-th">
            <div class="sort-th-title">创建时间</div>
            <div class="sort-arrows">
                <c:choose>
                    <c:when test="${sort=='create_time' &&  order=='asc'}">
                        <a href="?sort=create_time&order=asc&title=${event.title}" class="bg-red" title="升序排序">▲</a>
                    </c:when>
                    <c:otherwise>
                        <a href="?sort=create_time&order=asc&title=${event.title}" title="升序排序">▲</a>
                    </c:otherwise>
                </c:choose>
                <c:choose>
                    <c:when test="${sort=='create_time' &&  order=='desc'}">
                        <a href="?sort=create_time&order=desc&title=${event.title}" class="bg-red" title="降序排序">▼</a>
                    </c:when>
                    <c:otherwise>
                        <a href="?sort=create_time&order=desc&title=${event.title}" title="降序排序">▼</a>
                    </c:otherwise>
                </c:choose>
            </div>
        </th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${events}" var="item">
        <tr>
            <c:set var="redKey" value="<font color='red'>${event.title}</font>"/>
            <td>
                  <a href="detail?id=${item.id}">${fn:replace(item.title,event.title,redKey)}</a>
            </td>
            <td>${item.searchIndex}</td>
            <td>${item.user.nickname}</td>
            <td><fmt:formatDate value="${item.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div class="pagination">
    <a href="?page=1&title=${event.title}&sort=${sort}&order=${order}">首页</a>
    <a href="?page=${pageIndex-1}&title=${event.title}&sort=${sort}&order=${order}">&laquo; 上一页</a>
    <span>第 ${pageIndex} 页，共 ${pageCount} 页</span>
    <a href="?page=${pageIndex+1}&title=${event.title}&sort=${sort}&order=${order}">下一页 &raquo;</a>
    <a href="?page=${pageCount}&title=${event.title}&sort=${sort}&order=${order}">末页</a>
</div>
<!-- 添加事件按钮 -->
<button id="addEventButton">添加事件</button>

<!-- 添加事件模态框 -->
<div id="addEventModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <form action="addevent" method="post">
            <label for="title">标题:</label>
            <input type="text" id="title" name="title" required>
            <label for="searchIndex">搜索指数:</label>
            <input type="number" id="searchIndex" name="searchIndex" required>
            <c:if test="${user != null}">
                <input type="submit" value="提交">
            </c:if>
            <c:if test="${user == null}">
                <input type="button" title="登录后才能提交" value="提交" disabled>
            </c:if>
        </form>
    </div>
    <!-- JavaScript代码 -->
    <script>
        var modal = document.getElementById('addEventModal');
        var btn = document.getElementById("addEventButton");
        var span = document.getElementsByClassName("close")[0];

        btn.onclick = function() {
            modal.style.display = "block";
        }

        span.onclick = function() {
            modal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</div>
</div>
</body>
</html>
